<template>
  <div class="tool-bar">
    <div v-show="showBtn" class="btn-list">
      <div
        :class="[
          'item',
          activeToolbar.active && activeToolbarId === parent.id
            ? 'item-active'
            : '',
        ]"
        @click="clickToolBtn(parent)"
        v-for="parent in btnList"
        :key="parent.id"
      >
        <div
          :class="
            activeToolbar.active && activeToolbarId === parent.id
              ? 'item-btn-active'
              : 'item-btn'
          "
        >
          <img
            :src="require(`@/assets/home/bottom/toolbar/${parent.icon}.png`)"
            alt=""
          />
        </div>
        <div
          :class="[
            activeToolbar.active && activeToolbarId === parent.id
              ? 'item-show-list-avtive'
              : '',
            'item-show-list',
          ]"
        >
          <div class="children">
            <div
              :class="[
                activeToolbar.active && activeChildId === item.id
                  ? 'child-active'
                  : 'child',
              ]"
              @click.stop="clickChild(item)"
              v-for="item in parent.children"
              :key="item.id"
            >
              <img
                :src="require(`@/assets/home/bottom/toolbar/${item.icon}.png`)"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-bg"></div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { nanoid } from "nanoid";
@Component({
  components: {},
})
export default class ToolBar extends Vue {
  @Prop({
    type: Boolean,
    default: true,
  })
  showBtn!: boolean;

  private btnList = [
    {
      id: nanoid(),
      icon: 0,
      type: "icon", //设置外围可以替换icon
      title: "主视图",
      method: "init",
      active: false, //当前选中状态
      data: {},
      children: [
        {
          id: nanoid(),
          icon: 0,
          type: "icon", //设置外围可以替换icon
          title: "主视图",
          active: false, //当前选中状态
          method: "init",
          data: {},
        },
        {
          id: nanoid(),
          icon: 0,
          type: "icon", //设置外围可以替换icon
          title: "主视图",
          method: "init",
          active: false, //当前选中状态
          data: {},
        },
        {
          id: nanoid(),
          icon: 0,
          type: "icon", //设置外围可以替换icon
          title: "主视图",
          active: false, //当前选中状态
          method: "init",
          data: {},
        },
      ],
    },
    {
      id: nanoid(),
      icon: 1,
      title: "主视图",
      type: "icon", //设置外围可以替换icon
      method: "init",
      active: false, //当前选中状态
      data: {},
      children: [
        {
          id: nanoid(),
          icon: 0,
          type: "icon", //设置外围可以替换icon
          title: "主视图",
          active: false, //当前选中状态
          method: "init",
          data: {},
        },
        {
          id: nanoid(),
          icon: 0,
          type: "icon", //设置外围可以替换icon
          title: "主视图",
          active: false, //当前选中状态
          method: "init",
          data: {},
        },
        {
          id: nanoid(),
          icon: 0,
          type: "icon", //设置外围可以替换icon
          title: "主视图",
          method: "init",
          active: false, //当前选中状态
          data: {},
        },
        {
          id: nanoid(),
          icon: 0,
          type: "icon", //设置外围可以替换icon
          title: "主视图",
          active: false, //当前选中状态
          method: "init",
          data: {},
        },
      ],
    },
    {
      id: nanoid(),
      icon: 1,
      title: "主视图",
      type: "icon", //设置外围可以替换icon
      method: "init",
      active: false, //当前选中状态
      data: {},
      children: [
        {
          id: nanoid(),
          icon: 0,
          type: "icon", //设置外围可以替换icon
          title: "主视图",
          method: "init",
          active: false, //当前选中状态
          data: {},
        },
        {
          id: nanoid(),
          icon: 0,
          type: "icon", //设置外围可以替换icon
          title: "主视图",
          active: false, //当前选中状态
          method: "init",
          data: {},
        },
      ],
    },
  ];
  private activeToolbarId: any = 0;
  private activeToolbar: any = {};

  clickToolBtn(toolbar: any) {
    this.activeToolbarId = toolbar.id;

    if (this.activeToolbar && this.activeToolbar.id === toolbar.id) {
      this.activeToolbar.active = !this.activeToolbar.active;
    } else {
      //没有的时候
      this.activeToolbar = toolbar;
      this.activeToolbar.active = true;
    }
  }
  private activeChildId: any = 0;
  private activeChild: any = {};
  clickChild(child: any) {
    this.activeChildId = child.id;
    if (this.activeChild && this.activeChild.id === child.id) {
      this.activeChild.active = !this.activeChild.active;
    } else {
      //没有的时候
      this.activeChild = child;
      this.activeChild.active = true;
    }
  }
}
</script>
<style lang="scss" scoped>
@keyframes activeMove {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.tool-bar {
  height: 80px;
  position: relative;
  .btn-list {
    display: flex;
    align-items: center;
    .item {
      transform: translateY(0);
      /* transition: all 2 ease; */
      cursor: pointer;
      display: flex;
      /* align-items: center; */
      margin: 0 6px;
      .item-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #4c89b6;
        box-shadow: inset 0 0 10px 2px #4c89b6;
        img {
          margin: 10px;
        }
      }
      .item-btn-active {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #4c89b6;
        background: linear-gradient(
          90deg,
          #2192b8 0%,
          rgba(33, 146, 184, 0.5) 50%,
          #2192b8 100%
        );
        img {
          margin: 10px;
        }
      }
      .item-show-list {
        width: 0;
        display: none;
        margin-left: 10px;
        overflow: hidden;

        .children {
          padding: 0 5px;
          display: flex;
          align-items: center;
          border: 1px solid rgba(95, 191, 255, 0.6);
          overflow: hidden;
          border-radius: 0px 4px 4px 0px;
          background-color: rgba(8, 39, 55, 0.7);
          .child {
            height: 30px;
            display: flex;
            align-items: center;
            margin: 0 5px;
            &:hover {
              border-radius: 4px;
              background: linear-gradient(
                90deg,
                #2192b8 0%,
                rgba(33, 146, 184, 0.5) 50%,
                #2192b8 100%
              );
            }
            img {
              margin: 10px;
            }
          }
          .child-active {
            display: flex;
            align-items: center;
            transition: all 0.3s cubic-bezier(0, 0, 0.32, 1);
            /* transition: all 0.3s; */
            margin: 0 5px;
            width: 40px;
            height: 30px;
            border-radius: 4px;
            background: linear-gradient(
              90deg,
              #2192b8 0%,
              rgba(33, 146, 184, 0.5) 50%,
              #2192b8 100%
            );
            img {
              margin: 10px;
            }
          }
        }
      }
      .item-show-list-avtive {
        display: block;
      }
    }
    .item-active {
      animation: activeMove 0.8s cubic-bezier(0, 0, 0.32, 1);
      transform: translateY(-6px);
      .item-show-list {
        width: auto;
      }
    }
  }
}
.btn-bg {
  position: absolute;
  top: 30px;
  height: 20px;
  width: 100%;
  z-index: -1;
  /* width: calc(100% - 40px); //yon内容撑满父盒子 */
  background-color: rgba(8, 39, 55, 0.7);
  transform: skew(-45deg);
  border-radius: 5px;
}
</style>
